<template>
    <div id="app">
        <div class="login-bg"
             style="background-image: url('js/login/default/login-bg.jpg');"></div>
        <div class="contain-app">
            <div class="login-panel">
                <form id="login" method="POST" v-on:submit.prevent="onSubmit">
                    <input type="hidden" name="_token" value="#"/>

                    <div class="form-box">
                        <span class="title">账户登录</span>
                        <div class="group">
                            <i class="iconfont icon-yonghuming"></i>
                            <input name="username" id="username" type="text" v-model="username"/>
                        </div>
                        <div class="group">
                            <i class="iconfont icon-mima"></i>
                            <input name="userpass" id="userpass" type="password" v-model="userpass"/>
                        </div>
                        <div class="group" id="yzm-div">
                            <i class="iconfont icon-ad80"></i>
                            <input name="yzm" id="yzm" type="text" v-model="yzm"/>

                            <div id="yzm-img-div">
                                <img id="img_yzm" :src="yzm_url" width="120" height="42"
                                     @click="refreshCode">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div style="margin-bottom: 50px;">
                            <!--<a onclick="regModal(true)" href="#reg-modal" style="float: left">注册新用户</a>-->
                            <a @click="findPass" style="float: right;cursor: pointer;">忘记密码？</a>
                        </div>
                        <div class="clearfix"></div>
                        <div class="group">
                            <button type="submit">登&nbsp;&nbsp;录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import "toastr/build/toastr.min.css";
    import Toast from 'toastr';

    export default{
        data: function () {
            return {
                username: "",
                userpass: "",
                yzm: "",
                yzm_url: "/coms/user-code?" + Math.random()
            }
        },
        methods: {
            refreshCode: function () {
                this.yzm_url = "/coms/user-code?" + Math.random();
            },
            onSubmit: function () {
                this.$http.post("/login-act", {
                    "username": this.username,
                    "userpass": this.userpass,
                    "yzm": this.yzm
                }).then(
                    function (response) {       //请求成功
                        var json = response.body;
                        if (json.code == 0) {
                            Toast.success(json.msg);
                        } else if (json.code == 1) {
                            Toast.error(json.msg);
                            this.refreshCode();
                        }
                    }, function (response) {    //请求失败
                        Toast.error(response.statusText);
                    });
            },
            findPass: function () {

            }
        }
    };
</script>

<style type="text/css">

</style>